<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="shortcut icon"
      href="https://niit-soft.oss-cn-hangzhou.aliyuncs.com/icon/icons8_storage.ico"
      type="image/x-icon"
    />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      .card {
        width: 400px;
        height: 450px;
        padding: 10px 10px;
        border: 1px solid #eee;
        box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.5);
        margin: auto;
      }
      .header {
        width: 100%;
        height: 200px;
      }
      img {
        width: 100%;
        height: 100%;
      }
      .content {
        width: 100%;
        height: 200px;
        margin-top: 30px;
      }
      .content p {
        text-indent: 2em;
      }
      .content button {
        width: 160px;
        height: 45px;
        background: rgb(80, 151, 239);
        border-radius: 4px;
        color: white;
        border: none;
      }
      .con-body-btn {
        text-align: center;
        margin-top: 30px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="card">
        <div class="header">
          <img src="https://i.loli.net/2020/05/12/dVMKqUEn5wfusX4.jpg" alt="" />
        </div>
        <div class="content">
          <span class="con-title">Hi</span>
          <p class="con-body">
            有些事情可能你已经忘记，但我们依然记得。
            今天是你的生日，我们唱了一首歌送给你，希望它能给你带来一些惊喜和欢乐。Happy Birthday。
          </p>
          <div class="con-body-btn"><button>开始</button></div>
        </div>
      </div>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        created: {},
        components: {},
      })
    </script>
  </body>
</html>
